<!--
    获取地址经纬度 弹窗
    参数：
    mapModal        弹窗开关
    mapAddress      详细地址
    mapLocation     省市

    方法:
    confirmLngLat   确认 ;返回值： Object { longitude: "", latitude: "" }
    closeMapModel   关闭弹窗
 -->
<template>
    <Modal
        v-model="modal"
        @on-cancel="cancel"
        @on-ok="confirm"
        :mask-closable="false"

        title="获取地址经纬度"
        class-name="baidu-map-modal"
        :styles="{width:'90vw',maxHeight: '90vh',top:'5vh'}"
    >
        <div class="BaiduMap" v-if="mapModal">
            <baidu-map
                :style="mapStyle"
                class="bm-view"
                ak="XdmXNXXTLean6wSpcz8PvwlxsxxBkGLo"
                :center="mapLocation"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                @ready="handler"
                @click="getClickInfo"
            >
                <bm-view style="width: 100%; height:100%;"></bm-view>
                <!-- <bm-marker :position="{lng: locData.longitude, lat: locData.latitude}" :dragging="true"></bm-marker> -->

                <bm-control :offset="{width: '10px', height: '10px'}">
                    <bm-auto-complete v-model="mapAddress" :sugStyle="{zIndex: 999999}">
                        <input type="text" :placeholder="'搜索：'+mapLocation + mapAddress" class="serachinput" />
                    </bm-auto-complete>
                </bm-control>
                <bm-local-search :keyword="mapLocation + mapAddress" :auto-viewport="true" style="width:0;height:0;overflow: hidden;"></bm-local-search>
            </baidu-map>
            <Row class="inputs">
                <Col span="12">
                    <span>经度：</span>
                    <Input class="lineinput" style="max-width:150px" v-model.number="locData.longitude"></Input>
                </Col>
                <Col span="12">
                    <span>纬度：</span>
                    <Input class="lineinput" style="max-width:150px" v-model.number="locData.latitude"></Input>
                </Col>
            </Row>
        </div>
    </Modal>
</template>
<script>
import {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
} from "vue-baidu-map";
export default {
    // name: "BaiduMap",
    components: {
        BaiduMap,
        BmControl,
        BmView,
        BmAutoComplete,
        BmLocalSearch,
        BmMarker
    },
    props: {
        mapModal: {
            type: Boolean,
            required: true
        },
        mapAddress: {
            type: String,
            required: true
        },
        mapLocation: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            search: this.mapLocation + this.mapAddress,
            modal: this.mapModal,
            mapStyle: {
                width: "100%",
                height: "100%"
            },
            zoom: 12,
            locData: {
                longitude: "",
                latitude: ""
            }
        };
    },
    watch: {
        mapModal: function(newVal, oldVal) {
            if (oldVal != newVal) {
                this.modal = newVal;
            }
        }
    },
    methods: {
        handler({ BMap, map }) {
            window.map = map;
        },
        /***
         * 地图点击事件。
         */
        getClickInfo(e) {
            map.clearOverlays();
            let Icon_0 = new BMap.Icon(
                "http://api0.map.bdimg.com/images/marker_red_sprite.png",
                new BMap.Size(64, 64),
                {
                    anchor: new BMap.Size(18, 32),
                    imageSize: new BMap.Size(36, 25)
                }
            );
            let myMarker = new BMap.Marker(
                new BMap.Point(e.point.lng, e.point.lat),
                { icon: Icon_0 }
            );
            map.addOverlay(myMarker);
            let point = new BMap.Point(e.point.lng, e.point.lat);
            this.locData.longitude = e.point.lng;
            this.locData.latitude = e.point.lat;
        },

        confirm() {
            this.$emit("confirmLngLat", this.locData);
            this.modal = false;
        },
        //  弹窗切换
        cancel() {
            this.$emit("closeMapModel");
            this.modal = false;
        }
    }
};
</script>

<style lang="less" scoped>
.BaiduMap {
    width: 100%;
    height: calc(100% - 40px);
}
.serachinput {
    width: 300px;
    color: #333;
    position: relative;
}
.inputs {
    padding-top: 16px;
}
</style>
<style lang="less">
    .baidu-map-modal {
        .ivu-modal-content {
            height: 90vh;
        }
        .ivu-modal-body {
            height: calc(100% - 100px);
        }
    }
</style>
